<template>
  <div class="container">
    <div class="search">
      <van-search
        @click="gotoDetails"
        shape="round"
        background="#ffffff"
        v-model="value"
        placeholder="请输入搜索关键词"
      />
    </div>
    <!--  点击搜索商品  -->
    <div class="searchTop">
      <van-grid :border="false">
        <van-grid-item
          @click="changeType(item)"
          v-for="(item, index) in typeProducts"
          :key="index"
          :icon="item.typeDesc === iconSelect ? item.active : item.default"
        >
          <template #text>
            <span :class="item.typeDesc === iconSelect ? 'blue' : 'else'">
              {{ item.typeDesc }}
            </span>
          </template>
        </van-grid-item>
      </van-grid>
    </div>
    <!--  商品列表  -->
    <div class="commodity">
      <div
        class="commodity_item"
        v-for="(item, index) in commodityList"
        :key="index"
        @click="toProductDetails(item)"
      >
        <div class="left">
          <img :src="item.smallImg" alt="" class="auto-img" />
        </div>
        <div class="center">
          <div>{{ item.name }}</div>
          <div class="enname">{{ item.enname | enName }}</div>
        </div>
        <div class="right">
          <div>￥{{ item.price }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getType, getTypeProducts } from "@/api/menus";

export default {
  name: "menus",
  data() {
    return {
      value: "",
      typeProducts: [
        {
          active: require("@/assets/images/icons_21.gif"),
          default: require("@/assets/images/icons_09.gif"),
        },
        {
          active: require("@/assets/images/icons_18.gif"),
          default: require("@/assets/images/icons_03.gif"),
        },
        {
          active: require("@/assets/images/icons_19.gif"),
          default: require("@/assets/images/icons_05.gif"),
        },
        {
          active: require("@/assets/images/icons_20.gif"),
          default: require("@/assets/images/icons_07.gif"),
        },
      ],
      iconSelect: "拿铁", //icon默认的状态
      typeValue: "latte", //商品类型
      commodityList: [], //商品列表
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      let self = this;
      let typeProducts = this.typeProducts;
      // 获取商品类型
      getType().then((res) => {
        let result = res.data.result;
        // 对数组对象进行增加键值对
        result.forEach((item, index) => {
          typeProducts[index].type = item.type;
          typeProducts[index].typeDesc = item.typeDesc;
        });
      });
      // 发起初次请求获取商品
      self.getTypeProducts(self.typeValue);
    },
    // 改变商品类型
    changeType(item) {
      this.iconSelect = item.typeDesc;
      this.typeValue = item.type;
      this.getTypeProducts(this.typeValue);
    },
    // 根据商品类型获取商品
    getTypeProducts(value) {
      let self = this;
      self.commodityList = [];
      getTypeProducts({
        key: "type",
        value: value,
      }).then((res) => {
        self.commodityList = res.data.result;
      });
    },
    // 前往商品详情
    toProductDetails(item) {
      this.$router.push({ name: "productDetails", query: { pid: item.pid } });
    },
    // 跳转到搜索界面
    gotoDetails() {
      this.$router.push("searchDetail");
    },
  },
};
</script>

<style scoped lang="less">
.container {
  background: #fbfafa;

  .search {
    background: #ffffff;
  }

  .searchTop {
    background: #fbfafa;

    .blue {
      color: #0a33b9;
      font-size: 14px;
    }

    .else {
      font-size: 14px;
    }
  }

  .commodity {
    margin: 15px;
    background: #fbfafa;

    .commodity_item {
      background: #ffffff;
      display: flex;
      flex-wrap: wrap;
      padding: 8px;
      height: 70px;
      justify-content: space-around;
      align-items: center;
      margin: 8px;

      .left {
        flex: 2;
      }

      .center {
        flex: 6;
        padding-left: 6px;
        font-size: 14px;

        .enname {
          margin: 5px 0;
          color: #555;
        }
      }

      .right {
        flex: 2;
        color: #0a33b9;
        font-weight: bold;
        text-align: center;
      }
    }
  }
}
</style>
